<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<div id="cabecalho">
			<h1>Players.com</h1>
			<p style="float: right">
				<span>Bem-vindo:</span> 
				<span data-bind="text: username" />
				<button data-bind='click: logout'>Sair</button>
			</p>
		</div>
		<div id="tabs">
			<ul>
		    	<li id="time"><a href="#tabs-1">Time</a></li>
				<li id="player"><a href="#tabs-2">Player</a></li>
			</ul>
			<div id="tabs-1"></div>
			<div id="tabs-2"></div>
		</div>
		
</div>
		
        <div id="rodape"></div>
	</body>
	
	<script>
		$(document).ready(function() {
			$( "#tabs-1" ).load("/players-com/pages/time.html");
	        $( "#tabs-2" ).load("/players-com/pages/player.html");
	
			$(function() {
				$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
	    		$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
			});
			
			$("#time").click(function() {
				document.location.reload(true);
			});
			
			var modalMensagemPlayer = $('#mensagemPlayer').dialog({ autoOpen: false, dialogClass: 'no-close', modal: true, closeOnEscape: true, title: 'Convite Player', height: 380, width: 500 });
			function MensagemPlayer() {
						
				var request = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/cadastro/convite/buscaMensagemPlayer', data: {codigoPlayer: user.id}});
							
				request.done( function (callback) {
					mensagemPlayer.dialog('open');
				});

			}

			ko.applyBindings(new Logout(), document.getElementById("modalMensagemPlayer"));

			
			function Logout() {
				this.self = this;
				
				self.username = ko.computed( function() {
					user = $.parseJSON(localStorage.user);
					return user.nome;
				});
				
				self.logout = function() {
					localStorage.clear();
					window.location.href = "/players-com/index.html";
				}
			}
			
			ko.applyBindings(new Logout(), document.getElementById("cabecalho"));
		});
	</script>
</html>